<template>
    <section class="">
        <div class="cartGoods"
            v-for = "(shopList, sk) in cmmdtyList" :key="shopList.id">
			<div class="tit">
                <em></em>
                <span>{{shopInfos[sk].shopType == '0' ? shopInfos[sk].shopName : '苏宁自营苏鲜生'}}</span>
				<span class="postage">{{shopInfos[sk].shopDeliveryFee}}</span>
			</div>

			<div class="demo-content"
                v-for = "(timeList, tk) in shopList">

                <template
                    v-for = "(item, key) in timeList">
                    <label class="goods">
                        <a class="proimg">
                            <img :src="item.mainCmmdtyHeadInfo.cmmdtyCode | newImgUrl(item.mainCmmdtyHeadInfo.imgFlag)" @error="error">
                        </a>
                        <div class="m-txt">
                            <p class="name">
                                {{ item.mainCmmdtyHeadInfo.cmmdtyName }}
                            </p>
                            <p class="price">
                                &yen;{{ item.mainCmmdtyHeadInfo.salesPrice }}
                                <em>
                                   &times{{item.mainCmmdtyHeadInfo.cmmdtyQty}}
                                </em>
                            </p>
                        </div>
                    </label>
                    <template v-for = "(properties, key) in item.serviceProperties">
                        <div class="m-explain"
                            v-if="properties.serviceFlag=='9' && shopInfos[sk].shopType == '0'">
                            <i>退</i>
                            {{properties.serviceType}}
                        </div>
                    </template>
                </template>

                <p class="clock-bg arrivalTime"
                    v-if="sk=='0000000000'&&tk!='defualt'">
                    预计送达时间
                    <em>{{getFormatData(tk)}}</em>
                </p>
            </div>
		</div>
        <div style="height:1.96rem">
        </div>
        <div class="xiadan">
            <em>
                实付金额：
                <strong>&yen;{{info.cartHeadBasicInfo.payAmount | formatPrice}}</strong>
            </em>
            <span class="total">共{{cartNumber}}件</span>
        </div>
    </section>
</template>

<script>
    export default {
         data(){
            return {
                msg: 'hello'
            }
         },
         created(){

         },
         methods: {
            error(e) {
                e.target.src = "/static/images/pro-default.png"
            }
            // 根据后台日期格式 返回显示的日期 返回 ['2017','05','28']
			,getFormatData(data){
				var ab = data.split('-')
				let TIMEARRAY ={
					"1":"09:00-18:00",
					"2":"09:00-14:00",
					"3":"14:00-18:00",
					"4":"18:00-23:00"
				}
				var db = new Date();
				db.setFullYear(ab[0], ab[1]-1, ab[2]);
				var unixDb=db.getTime();
				var weeks = new Date(parseInt(unixDb)).getDay();
				var weeksTxt = ['周日','周一','周二','周三','周四','周五','周六'][weeks]

				return `${ab[0]}-${ab[1]}-${ab[2]} [${weeksTxt}] ${TIMEARRAY[ab[3]]}`
			}
        },
        computed: {
            info() {
                return this.$store.state.cart2.centerCart2Info
            },

            cmmdtyList(){
                let list = {}
                let cmmdtyInfos = this.info.cmmdtyInfoItems

                cmmdtyInfos.forEach((ov, oi)=>{
                    let shopCode = ov.mainCmmdtyHeadInfo.shopCode
                    let arrivalTime = ov.mainCmmdtyHeadInfo.selectedArrivalTime || 'defualt'

                    // 对象中不存在商户编码
                    if(!list[shopCode]){
                        list[shopCode] = {}
                        list[shopCode][arrivalTime] = [ov]

                    }else{
                        if(!list[shopCode][arrivalTime]){
                            list[shopCode][arrivalTime] = [ov]
                        }else{
                            list[shopCode][arrivalTime].push(ov)
                        }
                    }
                })
                return list
            },

            shopInfos(){
                let list = {}
                let shopInfos = this.info.shopInfos

                shopInfos.forEach((ov, oi)=>{
                    let shopCode = ov.shopCode
                    let shopName = ov.shopName
                    let shopDeliveryFee = ov.shopDeliveryFee

                    list[shopCode] = {}
                    list[shopCode].shopName = shopName
                    if(shopCode=='0000000000'&&parseFloat(shopDeliveryFee)==0){
                        shopDeliveryFee = '苏宁配送，免运费'
                    }else if(parseFloat(shopDeliveryFee)==0){
                        shopDeliveryFee = '免运费'
                    }else{
                        shopDeliveryFee = '运费：¥'+shopDeliveryFee
                    }
                    list[shopCode].shopDeliveryFee =shopDeliveryFee

                    // 区分苏宁自营苏鲜生
                    list[shopCode].shopType = ov.shopType
                })
                return list

            },

            cartNumber(){
				let num = 0;
				this.info.cmmdtyInfoItems.forEach(item => {
					num += item.mainCmmdtyHeadInfo.cmmdtyQty
				})
				return num
			}
        }
    }
</script>

<style lang="scss" scoped>
    @function _($px) {
        $rem: $px/50;
        @return #{$rem}rem;
    }
    .apptip-visible .cartGoods{
        padding-top: 2.08rem;
    }
    .cartGoods{
        .tit {
            height: 2.24rem;
            line-height: 1.76rem;
            color: #444;
            font-size: .56rem;
            background-color: #f8f8f8;
            padding: 0 .8rem;
            z-index: 8888;
            overflow: hidden;
            border-top: _(22) solid #f1f1f1;
            border-bottom: 1px solid #e6e6e6;
            .postage{
                float: right;
                color: #ff782d;
                font-size: _(24);
                margin-left:_(10)
            }
            em {
                background-image: url("");
                display: inline-block;
                width: .72rem;
                height: .72rem;
                background-repeat: no-repeat;
                background-size: contain;
                vertical-align: middle;
                margin-right: .16rem;
            }
            &.self{
                em{
                    background-image: url('/static/images/snlogo-48.png');
                }
            }
            button {
                //display: none;
                width: 3.26rem;
                height: 1.2rem;
                float: right;
                border: 1px solid #ff782d;
                color: #ff782d;
                font-size: .48rem;
                text-align: center;
                margin: .28rem 0;
                background: #fff;
                border-radius: 2px;
                outline: none;
            }
        }
    }
    .demo-content{
        font-size: .56rem;
        background: #fff;
        position: relative;
        -webkit-transition: all .5s;
        transition: all .5s;
        box-sizing: border-box;
        //padding: .56rem 0;
        border-bottom: 1px solid #e8e8e8;
        overflow: hidden;
        label.goods{
            padding: .4rem .8rem;
            overflow: hidden;
            line-height: 1;
            display: block;
            z-index: 4;
        }
        .proimg{
            float: left;
            display: inline-block;
            position: relative;
            width: 3rem;
            height: 3rem;
            border: 1px solid #e6e6e6;
            margin-right:_(15);
            img{
                width: 100%;
                height: 100%;
                margin-right: .24rem;
                float: left;
            }
            p{
                position: absolute;
                bottom:0;
                left:0;
                right:0;
                width: 3.2rem;
                height: 0.6rem;
                line-height: 0.6rem;
                background-color: rgba(0,0,0,.3);
                color: #fff;
                text-align: center;
                font-size:_(24)
            }
        }
        .m-txt{
            float: left;
            width: 10rem;
            position: relative;
            .name{
                width: 8.76rem;
                letter-spacing: .88px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: block-axis;
                text-overflow: ellipsis;
                overflow: hidden;
                margin-bottom: .02rem;
                line-height: .7rem;
                color: #333;
                font-size: _(26);
                margin-top: 0.2rem;
            }
            .price{
                color: #fa4848;
                margin-top: 1.3rem;
                em{
                    color: #333;
                    float: right;
                }
            }

        }
        .m-explain{
            padding: .4rem .8rem;
            color: #383838;
            border-top: 1px solid #e8e8e8;
            i{
                display: inline-block;
                width: _(36);
                height: _(36);
                line-height: _(36);
                text-align: center;
                color: #fff;
                background-color: #ff782e;
                border-radius:2px;
                margin-right: _(5);
                font-size: _(20);
            }
        }
        .arrivalTime{
            padding: .4rem .8rem;
            color: #949494;
            border-top: 1px solid #e8e8e8;
            em{
                float: right;
                color: #ff782d;
            }
        }
    }
    .xiadan {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		border-top: 1px solid #e8e8e8;
		background-color: #fff;
		color: #fff;
		font-size: .72rem;
		text-align: center;
		height: 1.96rem;
		line-height: 1.96rem;
		width: 15rem;
		margin: 0;
		border-radius: 0;
		z-index: 2;
		em{
			position: absolute;
			text-align: right;
			top: 50%;
			left: 1rem;
			height: .72rem;
			line-height: .72rem;
			color: #333;
			font-size: _(26);
			margin-top: -.36rem;
			strong{
				height: .72rem;
				display: inline;
				float: right;
				color: #fa4848;
				font-weight: normal;
				font-size:_(34);
			}
		}
        .total {
            float: right;
            margin-right: 1rem;
            line-height: 1.96rem;
            color: #F60;
            font-size: .6rem;
        }
	}

</style>

